<template>
  <div class="pro">
    
    <template>
      <sjx_Header/>
    </template>
    <div class="banner">
      <p>{{ $t('header.contact') }}</p>
    </div>
    <div class="body">
      <div class="body-main">
        <h3>{{ $t('header.contact') }}</h3>
        <div class="box">
          <span class="title-1">{{ $t('contactUS.tel') }}</span>
          <p class="title-2">0774119618</p>
        </div>
        <div class="box">
          <span class="title-1">{{ $t('contactUS.workTime') }}</span>
          <div class="time formForPC">
            <div class="time-1">
              <p>{{ $t('footer.MtoF') }}</p>
              <p>{{ $t('footer.Sat') }}</p>
            </div>
            <div class="time-2">
              <p>am 8:30~11:30 &nbsp;&nbsp;&nbsp;  pm 13:00~17:30</p>
              <p>am 8:30~12:00</p>
            </div>
          </div>
          <div class="formForM">
            <div class="title-2 ">
              <span>{{ $t('footer.MtoF') }}</span>
              <p>am 8:30~11:30 &nbsp;&nbsp;&nbsp;  pm 13:00~17:30</p>
              
            </div>
            <div class="title-2 ">
              <span>{{ $t('footer.Sat') }}</span>
              <p>am 8:30~12:00</p>
            </div>
          </div>
        </div>
        <div class="box">
          <p class="title-1">Mail:</p>
          <p class="title-2">mydongvietnam@gmail.com</p>
        </div>
        <div class="box">
          <p class="title-1">Facebook:</p>
          <p class="title-2">My Dong</p>
        </div>
        <div class="button-wrap">
          <!-- <div 
            class="jump" 
            @click="jump">{{ $t('login.registerNow') }}</div> -->
        </div>
      </div>
    </div>
    <template>
      <sjx_Footer/>
    </template>

  </div>
</template>

<script>
import sjx_Header from '../components/header'
import sjx_Footer from '../components/footer'
export default {
  name: 'Home',
  components: {
    sjx_Header,
    sjx_Footer
  },
  data() {
    return {}
  },
  methods: {
    jump() {
      this.$router.push('/')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@media screen and (min-width: 1200px) {
  .body-main {
    h3 {
      width: 100%;
      color: #3c3c3c;
      font-size: 30px;
      margin: 17px 0 32px;
      font-weight: 700;
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .body-main {
    h3 {
      width: 100%;
      color: #3c3c3c;
      font-size: 30px;
      margin: 17px 0 32px;
      font-weight: 700;
    }
  }
}
@media only screen and (max-width: 767px) {
  .body-main {
    h3 {
      width: 100%;
      color: #3462ff;
      font-size: 20px;
      text-align: center;
      margin: 20px 0;
    }
  }
}
</style>
